<template>
  <div class="dashboard">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">仪表盘</h1>
        <p class="page-description">欢迎回来，{{ userStore.userInfo.realName || userStore.userInfo.username }}</p>
      </div>
      <div class="header-actions">
        <el-button type="primary" :icon="Plus">
          新建项目
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div 
        v-for="(stat, index) in statsData" 
        :key="index"
        class="stat-card"
      >
        <div class="stat-header">
          <h3 class="stat-title">{{ stat.label }}</h3>
          <div class="stat-icon">
            <el-icon :size="20">
              <component :is="stat.icon" />
            </el-icon>
          </div>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-change" :class="stat.trend > 0 ? 'positive' : 'negative'">
            <el-icon :size="14">
              <component :is="stat.trend > 0 ? 'ArrowUp' : 'ArrowDown'" />
            </el-icon>
            <span>{{ Math.abs(stat.trend) }}% 较上月</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-grid">
      <!-- 图表卡片 -->
      <div class="chart-section">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">数据概览</h3>
            <div class="card-actions">
              <el-radio-group v-model="chartPeriod" size="small">
                <el-radio-button label="7d">7天</el-radio-button>
                <el-radio-button label="30d">30天</el-radio-button>
                <el-radio-button label="90d">90天</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="card-content">
            <div class="chart-placeholder">
              <el-icon :size="48" color="hsl(215.4 16.3% 46.9%)">
                <TrendCharts />
              </el-icon>
              <p>图表区域 - 可集成 ECharts</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 侧边栏区域 -->
      <div class="sidebar-section">
        <!-- 快捷操作 -->
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">快捷操作</h3>
          </div>
          <div class="card-content">
            <div class="quick-actions">
              <button 
                v-for="action in quickActions" 
                :key="action.name"
                class="quick-action"
                @click="handleQuickAction(action.name)"
              >
                <div class="action-icon">
                  <el-icon :size="18">
                    <component :is="action.icon" />
                  </el-icon>
                </div>
                <span class="action-label">{{ action.label }}</span>
              </button>
            </div>
          </div>
        </div>

        <!-- 系统状态 -->
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">系统状态</h3>
          </div>
          <div class="card-content">
            <div class="status-list">
              <div 
                v-for="status in systemStatus" 
                :key="status.name"
                class="status-item"
              >
                <div class="status-info">
                  <span class="status-name">{{ status.name }}</span>
                  <span class="status-value">{{ status.value }}</span>
                </div>
                <div class="status-bar">
                  <div 
                    class="status-progress" 
                    :style="{ 
                      width: status.percentage + '%',
                      backgroundColor: status.color 
                    }"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部区域 -->
    <div class="bottom-grid">
      <!-- 最近活动 -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">最近活动</h3>
          <el-button text :icon="Refresh" @click="refreshActivities">
            刷新
          </el-button>
        </div>
        <div class="card-content">
          <div class="activity-list">
            <div 
              v-for="(activity, index) in activities" 
              :key="index"
              class="activity-item"
            >
              <div class="activity-icon" :class="`activity-${activity.type}`">
                <el-icon :size="16">
                  <component :is="activity.icon" />
                </el-icon>
              </div>
              <div class="activity-content">
                <p class="activity-text">{{ activity.content }}</p>
                <span class="activity-time">{{ activity.timestamp }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 待办事项 -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">待办事项</h3>
          <el-button text :icon="Plus" @click="addTodo">
            添加
          </el-button>
        </div>
        <div class="card-content">
          <div class="todo-list">
            <div 
              v-for="(todo, index) in todoList" 
              :key="index"
              class="todo-item"
              :class="{ completed: todo.completed }"
            >
              <el-checkbox 
                v-model="todo.completed" 
                @change="toggleTodo(index)"
              />
              <span class="todo-text">{{ todo.text }}</span>
              <el-button 
                text 
                :icon="Delete" 
                @click="deleteTodo(index)"
                class="todo-delete"
              />
            </div>
            <div v-if="todoList.length === 0" class="empty-state">
              <el-icon :size="32" color="hsl(215.4 16.3% 46.9%)">
                <Check />
              </el-icon>
              <p>暂无待办事项</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { 
  Plus, DataAnalysis, User, Document, Money, TrendCharts,
  ArrowUp, ArrowDown, Refresh, Check, Delete, Setting,
  Download, FolderOpened, UserFilled, Bell, Monitor
} from '@element-plus/icons-vue'

const userStore = useUserStore()

// 时间相关
const currentDate = ref('')
const currentTime = ref('')
const chartPeriod = ref('7d')

// 统计数据
const statsData = ref([
  {
    label: '用户总数',
    value: '2,847',
    icon: 'User',
    type: 'primary',
    trend: 12.5
  },
  {
    label: '今日订单',
    value: '156',
    icon: 'Document',
    type: 'success',
    trend: 8.2
  },
  {
    label: '销售额',
    value: '¥89,012',
    icon: 'Money',
    type: 'warning',
    trend: -3.1
  },
  {
    label: '增长率',
    value: '15.8%',
    icon: 'TrendCharts',
    type: 'danger',
    trend: 5.7
  }
])

// 快捷操作
const quickActions = ref([
  { 
    name: 'addUser', 
    label: '新增用户', 
    icon: 'UserFilled', 
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  { 
    name: 'export', 
    label: '导出数据', 
    icon: 'Download', 
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
  },
  { 
    name: 'backup', 
    label: '数据备份', 
    icon: 'FolderOpened', 
    color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
  },
  { 
    name: 'settings', 
    label: '系统设置', 
    icon: 'Setting', 
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
  },
  { 
    name: 'monitor', 
    label: '系统监控', 
    icon: 'Monitor', 
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
  },
  { 
    name: 'notification', 
    label: '消息通知', 
    icon: 'Bell', 
    color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)'
  }
])

// 系统状态
const systemStatus = ref([
  {
    name: 'CPU使用率',
    value: '45%',
    percentage: 45,
    color: '#409eff'
  },
  {
    name: '内存使用率',
    value: '68%',
    percentage: 68,
    color: '#67c23a'
  },
  {
    name: '磁盘使用率',
    value: '32%',
    percentage: 32,
    color: '#e6a23c'
  },
  {
    name: '网络带宽',
    value: '78%',
    percentage: 78,
    color: '#f56c6c'
  }
])

// 最近活动
const activities = ref([
  {
    content: '用户 张三 注册了新账号',
    timestamp: '5分钟前',
    type: 'primary',
    icon: 'UserFilled'
  },
  {
    content: '订单 #12345 支付成功',
    timestamp: '15分钟前',
    type: 'success',
    icon: 'Money'
  },
  {
    content: '系统完成安全更新',
    timestamp: '1小时前',
    type: 'warning',
    icon: 'Setting'
  },
  {
    content: '数据备份任务完成',
    timestamp: '2小时前',
    type: 'info',
    icon: 'FolderOpened'
  },
  {
    content: '新用户权限审核通过',
    timestamp: '3小时前',
    type: 'success',
    icon: 'Check'
  }
])

// 待办事项
const todoList = ref([
  { text: '审核新用户注册申请', completed: false },
  { text: '更新系统安全策略', completed: false },
  { text: '检查服务器性能指标', completed: true },
  { text: '备份重要业务数据', completed: false },
  { text: '优化数据库查询性能', completed: false }
])

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour12: false
  })
}

// 定时器
let timeInterval = null

onMounted(() => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})

// 处理快捷操作
const handleQuickAction = (actionName) => {
  const actionMap = {
    addUser: '新增用户',
    export: '导出数据',
    backup: '数据备份',
    settings: '系统设置',
    monitor: '系统监控',
    notification: '消息通知',
    report: '查看报表'
  }
  
  ElMessage.success(`正在执行：${actionMap[actionName]}`)
}

// 刷新活动
const refreshActivities = () => {
  ElMessage.info('正在刷新活动数据...')
  // 这里可以调用API刷新数据
}

// 添加待办事项
const addTodo = async () => {
  try {
    const { value } = await ElMessageBox.prompt('请输入待办事项', '添加待办', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /.+/,
      inputErrorMessage: '待办事项不能为空'
    })
    
    todoList.value.unshift({
      text: value,
      completed: false
    })
    
    ElMessage.success('待办事项添加成功')
  } catch {
    // 用户取消
  }
}

// 切换待办状态
const toggleTodo = (index) => {
  const todo = todoList.value[index]
  if (todo.completed) {
    ElMessage.success('任务已完成')
  }
}

// 删除待办事项
const deleteTodo = (index) => {
  todoList.value.splice(index, 1)
  ElMessage.info('待办事项已删除')
}
</script>

<style scoped>
/* shadcn风格的Dashboard设计 */
.dashboard {
  padding: 0;
  background: transparent;
  min-height: 100%;
}

/* 页面标题 */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.header-content h1.page-title {
  font-size: 32px;
  font-weight: 700;
  color: hsl(222.2 84% 4.9%);
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.header-content p.page-description {
  color: hsl(215.4 16.3% 46.9%);
  font-size: 16px;
  margin: 0;
}

.header-actions .el-button {
  background: hsl(221.2 83.2% 53.3%);
  border: 1px solid hsl(221.2 83.2% 53.3%);
  color: hsl(210 40% 98%);
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-actions .el-button:hover {
  background: hsl(221.2 83.2% 53.3% / 0.9);
  transform: translateY(-1px);
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.stat-card {
  background: hsl(0 0% 100%);
  border: 1px solid hsl(214.3 31.8% 91.4%);
  border-radius: 8px;
  padding: 24px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover {
  box-shadow: 0 4px 6px -1px hsl(220 43% 11% / 0.1);
  transform: translateY(-2px);
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.stat-title {
  font-size: 14px;
  font-weight: 500;
  color: hsl(215.4 16.3% 46.9%);
  margin: 0;
}

.stat-icon {
  width: 40px;
  height: 40px;
  background: hsl(210 40% 96%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(215.4 16.3% 46.9%);
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: hsl(222.2 84% 4.9%);
  line-height: 1;
}

.stat-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.stat-change.positive {
  color: hsl(142.1 76.2% 36.3%);
}

.stat-change.negative {
  color: hsl(0 84.2% 60.2%);
}

/* 内容网格 */
.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

/* 卡片样式 */
.card {
  background: hsl(0 0% 100%);
  border: 1px solid hsl(214.3 31.8% 91.4%);
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  padding: 24px 24px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: hsl(222.2 84% 4.9%);
  margin: 0;
}

.card-actions .el-radio-group {
  background: hsl(210 40% 96%);
  border-radius: 6px;
  padding: 2px;
}

.card-actions .el-radio-button__inner {
  background: transparent;
  border: none;
  color: hsl(215.4 16.3% 46.9%);
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-actions .el-radio-button__inner:hover {
  background: hsl(0 0% 100%);
  color: hsl(222.2 84% 4.9%);
}

.card-actions .el-radio-button.is-active .el-radio-button__inner {
  background: hsl(0 0% 100%);
  color: hsl(222.2 84% 4.9%);
  box-shadow: 0 1px 2px hsl(220 43% 11% / 0.1);
}

.card-content {
  padding: 0 24px 24px 24px;
}

/* 图表区域 */
.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: hsl(215.4 16.3% 46.9%);
  background: hsl(210 40% 96%);
  border-radius: 6px;
}

.chart-placeholder p {
  margin-top: 12px;
  font-size: 14px;
}

/* 侧边栏区域 */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 快捷操作 */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: hsl(210 40% 96%);
  border: 1px solid hsl(214.3 31.8% 91.4%);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 14px;
  font-weight: 500;
  color: hsl(222.2 84% 4.9%);
}

.quick-action:hover {
  background: hsl(0 0% 100%);
  box-shadow: 0 2px 4px hsl(220 43% 11% / 0.1);
  transform: translateY(-1px);
}

.action-icon {
  width: 32px;
  height: 32px;
  background: hsl(221.2 83.2% 53.3%);
  color: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-label {
  font-size: 12px;
  text-align: center;
}

/* 系统状态 */
.status-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-name {
  font-size: 14px;
  color: hsl(215.4 16.3% 46.9%);
  font-weight: 500;
}

.status-value {
  font-size: 14px;
  font-weight: 600;
  color: hsl(222.2 84% 4.9%);
}

.status-bar {
  height: 8px;
  background: hsl(210 40% 96%);
  border-radius: 4px;
  overflow: hidden;
}

.status-progress {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 底部网格 */
.bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* 活动列表 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 300px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.activity-item:hover {
  background: hsl(210 40% 96%);
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.activity-primary {
  background: hsl(221.2 83.2% 53.3%);
}

.activity-success {
  background: hsl(142.1 76.2% 36.3%);
}

.activity-warning {
  background: hsl(38.4 92.1% 50.2%);
}

.activity-info {
  background: hsl(215.4 16.3% 46.9%);
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 14px;
  color: hsl(222.2 84% 4.9%);
  margin: 0 0 4px 0;
  font-weight: 500;
}

.activity-time {
  font-size: 12px;
  color: hsl(215.4 16.3% 46.9%);
}

/* 待办事项 */
.todo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.todo-item:hover {
  background: hsl(210 40% 96%);
}

.todo-item.completed {
  opacity: 0.6;
}

.todo-text {
  flex: 1;
  font-size: 14px;
  color: hsl(222.2 84% 4.9%);
  font-weight: 500;
}

.todo-item.completed .todo-text {
  text-decoration: line-through;
  color: hsl(215.4 16.3% 46.9%);
}

.todo-delete {
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: hsl(0 84.2% 60.2%) !important;
}

.todo-item:hover .todo-delete {
  opacity: 1;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: hsl(215.4 16.3% 46.9%);
}

.empty-state p {
  margin-top: 12px;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
  
  .sidebar-section {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }
}

@media (max-width: 768px) {
  .dashboard {
    padding: 0;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .content-grid {
    grid-template-columns: 1fr;
  }
  
  .sidebar-section {
    grid-template-columns: 1fr;
    display: flex;
  }
  
  .bottom-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-actions {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 滚动条样式 */
.activity-list::-webkit-scrollbar,
.todo-list::-webkit-scrollbar {
  width: 6px;
}

.activity-list::-webkit-scrollbar-track,
.todo-list::-webkit-scrollbar-track {
  background: transparent;
}

.activity-list::-webkit-scrollbar-thumb,
.todo-list::-webkit-scrollbar-thumb {
  background: hsl(215.4 16.3% 46.9% / 0.3);
  border-radius: 3px;
}

.activity-list::-webkit-scrollbar-thumb:hover,
.todo-list::-webkit-scrollbar-thumb:hover {
  background: hsl(215.4 16.3% 46.9% / 0.5);
}
</style>